<template>
  <div>
    <search />
    <div class="result">
      <el-row class="operation" type="flex">
        <!-- 两个按钮 -->
        <el-button class="primary">
          <svg-icon icon-class="add" class="addicon" />新建
        </el-button>
        <el-button class="secondary">工单配置</el-button>
      </el-row>
      <!-- table -->
      <el-table :data="taskData" style="width: 100%" :header-cell-style="{background:'#f3f6fb',fontWeight: 500}">
        <el-table-column type="index" prop="date" label="序号" width="80" />
        <el-table-column prop="taskId" label="工单编号" width="162" />
        <el-table-column prop="vmId" label="设备编号" width="155" />
        <el-table-column prop="vmId" label="工单类型" width="155" />
        <el-table-column prop="vmId" label="工单方式" width="155" />
        <el-table-column prop="vmId" label="工单状态" width="155" />
        <el-table-column prop="vmId" label="运营人员" width="155" />
        <el-table-column prop="vmId" label="创建日期" width="160" />
        <el-table-column prop="vmId" label="操作" width="100" />
      </el-table>
      <div class="pagination-container">
        <el-pagination :background="true" page-size="10">
          <slot name="—">
            共456条记录  第 1/46 页
          </slot>
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import search from './components/search.vue'
export default {
  components: { search },
  data() {
    return {
      taskData: []
    }
  }

}
</script>

<style lang="scss" scoped>
.pagination-container {
  background: #fff;
  padding: 32px 16px;
}
</style>
